<template>
  <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
    <el-table-column prop="name" label="默认" width="180">
      <template #default="scope">
        <SortEditor :row-data="scope.row" @confirmEdit="handleSortEdit" />
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="自定义" width="180">
      <template #default="scope">
        <SortEditor :row-data="scope.row" popover-title="自定义排序" popover-width="250" :input-max-length="30"
          input-placeholder="请输入自定义排序编码" :icon-size="20" display-mode="always" @confirmEdit="handleSortEdit" />
      </template>
    </el-table-column>
    <el-table-column prop="status" label="传递字符串类型的宽度/大小" width="200">
      <template #default="scope">
        <SortEditor :row-data="scope.row" popover-width="300px" :icon-size="10" @confirmEdit="handleSortEdit" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleNameEdit(scope.row)">
          编辑名称
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 名称编辑弹窗 -->
  <el-dialog v-model="nameDialogVisible" title="编辑名称">
    <el-input v-model="editName" placeholder="请输入名称"></el-input>
    <template #footer>
      <el-button @click="nameDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmNameEdit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SortEditor from '@/components/commons/sortCode/index.vue'; 
import { ElMessage } from 'element-plus';

// 表格数据
const tableData = ref([
  { id: 1, name: '项目A', sort: '01', status: '启用' },
  { id: 2, name: '项目B', sort: '02', status: '禁用' },
  { id: 3, name: '项目C', sort: '03', status: '启用' },
]);

// 名称编辑相关
const nameDialogVisible = ref(false);
const currentEditRow = ref<any>(null);
const editName = ref('');

// 处理排序编码编辑
const handleSortEdit = (row: any) => {
  // 这里可以调用API保存修改
  console.log('保存排序编码:', row);
  // 模拟API请求
  setTimeout(() => {
    ElMessage.success('排序编码修改成功');
  }, 500);
};

// 打开名称编辑弹窗
const handleNameEdit = (row: any) => {
  currentEditRow.value = row;
  editName.value = row.name;
  nameDialogVisible.value = true;
};

// 确认名称修改
const confirmNameEdit = () => {
  if (!editName.value.trim()) {
    ElMessage.error('名称不能为空');
    return;
  }
  currentEditRow.value.name = editName.value;
  nameDialogVisible.value = false;
  // 调用API保存
  console.log('保存名称:', currentEditRow.value);
  ElMessage.success('名称修改成功');
};
</script>